<template>
  <div id="app">
    <!-- 加载进度条 -->
    <nprogress-container></nprogress-container>
    <!-- 导航 -->
    <navbar :show="true"></navbar>
    <!-- 侧边栏 -->
    <sidebar :show="sidebar.opened && !sidebar.hidden"></sidebar>
    <!-- 主页面 -->
    <app-main></app-main>
    <!-- 脚部 -->
    <footer-bar></footer-bar>
  </div>
</template>

<script>
import NprogressContainer from 'vue-nprogress/src/NprogressContainer'
// components的layout里存放布局文件
import { Navbar, Sidebar, AppMain, FooterBar } from 'components/layout/'
// vuex快捷的方法
import { mapGetters, mapActions } from 'vuex'
// 简介：核心组件的配置，页面初始化的配置
export default {
  // 局部注册模块
  components: {
    Navbar,
    Sidebar,
    AppMain,
    FooterBar,
    NprogressContainer
  },
  // Mount前的初始化
  beforeMount () {
    // 获取body
    // 返回当前文档中的<body>元素或者<frameset>元素.
    const { body } = document
    // 设置宽度
    const WIDTH = 768
    // 设置比率
    const RATIO = 3

    const handler = () => {
      // Document.hidden （只读属性）返回布尔值，表示页面是（true）否（false）隐藏。
      if (!document.hidden) {
        // Element.getBoundingClientRect()方法返回元素的大小及其相对于视口的位置。
        // 返回值是一个 DOMRect 对象，这个对象是由该元素的 getClientRects() 方法返回的一组矩形的集合, 即：是与该元素相关的CSS 边框集合 。
        // OMRect 对象包含了一组用于描述边框的只读属性——left、top、right和bottom，单位为像素。除了 width 和 height 外的属性都是相对于视口的左上角位置而言的。
        let rect = body.getBoundingClientRect()
        // 判断是否是移动端
        let isMobile = rect.width - RATIO < WIDTH
        this.toggleDevice(isMobile ? 'mobile' : 'other')
        this.toggleSidebar({
          opened: !isMobile
        })
      }
    }

    document.addEventListener('visibilitychange', handler)
    window.addEventListener('DOMContentLoaded', handler)
    window.addEventListener('resize', handler)
  },
  mounted () {
    console.log('刷新')
    this.$store.dispatch('islogin')
  },
  // 加载数据 sidebar
  computed: mapGetters({
    sidebar: 'sidebar'
  }),
  // 加载action
  methods: mapActions([
    'toggleDevice',
    'toggleSidebar'
  ])
}
</script>

<style lang="scss">
@import '~animate.css';
.animated {
  animation-duration: .377s;
}

@import '~bulma';

@import '~wysiwyg.css/wysiwyg.sass';

$fa-font-path: '~font-awesome/fonts/';
@import '~font-awesome/scss/font-awesome';

html {
  background-color: whitesmoke;
}

.nprogress-container {
  position: fixed !important;
  width: 100%;
  height: 50px;
  z-index: 2048;
  pointer-events: none;

  #nprogress {
    $color: #48e79a;

    .bar {
      background: $color;
    }
    .peg {
      box-shadow: 0 0 10px $color, 0 0 5px $color;
    }

    .spinner-icon {
      border-top-color: $color;
      border-left-color: $color;
    }
  }
}
</style>
